<!-- 消息中心 -->
<template>
  <div class="box">
    <div class="header">
        <span @click="detalisfan"><img src="../assets/fanhui.png" alt=""></span>
        <big>消息中心</big>
        <div><small>排序</small> <img src="../assets/3.png" alt="" ></div>
    </div>
    <!-- Tab栏 -->
    <van-tabs v-model="active" title-active-color='#003399' color="#ffcc33">
      <!-- 内容一 -->
  <van-tab title="全部消息" >
      <div class="list" :img="active==1?imgSrc1:''" v-for="(item) in records" :key="item.id">
    <div class="list-l">
        <p><img :src="item.type==2?personage:system" alt=""></p>
                  
        <div v-if="item.isReader == 0 ? false:true" ><img :src='imgSrc1' alt=""></div>
        <div class="list-r">
            <pre><strong>{{item.title}}</strong><span ><img src="../assets/5.png" alt="" v-if="item.top==1?true:false"></span></pre>
             <p><small>发布人:</small> <span>{{item.sourceName}}</span></p>
        </div>
    </div>
    <div class="bottom-h">
        <big>{{item.createTime}}</big>
        <small @click="detailsClick(item.id)"><img src="../assets/More.png" alt="" ></small>
    </div>
</div>
  </van-tab>
  <!-- 内容二 -->
  <van-tab title="系统消息">
            <div class="list"  v-for="(item) in systemArr" :key="item.id">
    <div class="list-l">
        <p ><img :src="item.type==2?personage:system" alt=""></p>
           <div v-if="item.isReader == 0 ? false:true" ><img :src='imgSrc1' alt="" v-if="boole"></div>
        <div class="list-r">
            <pre><strong>系统消息</strong><span  ><img src="../assets/5.png" alt="" v-if="item.top==1?true:false"></span></pre>
             <p><small>发布人:</small> <span>{{item.sourceName}}</span></p>
        </div>
    </div>
    <div class="bottom-h">
        <big>{{item.createTime}}</big>
        <small @click="detailsClick(item.id)"><img src="../assets/More.png" alt=""></small>
    </div>
</div>
  </van-tab>
  <!-- 内容三 -->
  <van-tab title="个人消息">
        <div class="list" :img="active==1?imgSrc1:''" v-for="(item) in personageArr" :key="item.id">
    <div class="list-l">
        <p ><img :src="item.type==2?personage:system" alt=""></p>
           <div v-if="item.isReader == 0 ? false:true" ><img :src='imgSrc1' alt=""></div>
        <div class="list-r">
            <pre><strong>系统消息</strong><span @click="detailsClick(item.id)"><img src="../assets/5.png" alt="" v-if="item.top==1?true:false"></span></pre>
             <p><small>发布人:</small> <span>{{item.sourceName}}</span></p>
        </div>
    </div>
    <div class="bottom-h">
        <big>{{item.createTime}}</big>
        <small @click="detailsClick(item.id)"><img src="../assets/More.png" alt=""></small>
    </div>
</div>
  </van-tab>
</van-tabs>

  </div>
</template>

<script>
import {GetMessage,GetUpdates} from '../raxios/api'
export default {
  data() {
    return {
        active: 0,
        imgSrc1:require('../assets/图标/2.png'),
        system: require("../assets/系统消息.png"),
        personage: require("../assets/个人信息.png"),
        records:[],
        systemArr:[],
        personageArr:[],
        boole:true
        
        
    };
  },
  created(){
   GetMessage({current:1,size:100,type:0}).then(res=>{
       console.log(res);
       this.records=res.data.records;
        if (res.errCode == 0) {
        console.log(res.data.records);
        this.newsArr = res.data.records;
        this.systemArr = this.newsArr.filter(function (item) {
          return item.type == 1;
        });
        this.personageArr = this.newsArr.filter(function (item) {
          return item.type == 2;
        });
        this.unreadArr = this.newsArr.filter(function (item) {
          return item.isReader != 0;
        });
        }
   })
  },
  methods:{
      detailsClick(id){
          GetUpdates(id).then(res=>{
              console.log(res);
              if(res.errCode==0){
                  this.boole=false
              }
              this.$router.push('/home/mesdetails?id='+id)

          })
      },
      detalisfan(){
          this.$router.go(-1)
      }
  }
};
</script>
 
<style lang = "less" scoped>
.box {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #fff;
  z-index: 99;
  background-color: #f5f5f5;
  overflow: scroll;
  .header{
      height: 0.63rem;
      display: flex;
      justify-content: space-between;
      line-height: 0.63rem;
      color: #fff;
      img{
          height: 0.12rem;
      }
      big,small{
          font-size: 0.16rem;
      }
  }
  /deep/.van-tabs__wrap{
      margin-bottom: 0.1rem;
  }
  .list{
      height: 0.65rem;
      line-height: 0.25rem;
      padding: 0 0.14rem;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #e5e5e5;
      .list-l{
          display: flex;
          justify-content: space-between;
          position: relative;
          p img{
              width: 0.4rem;
              height: 0.4rem;
              line-height: 0.4rem;
              margin-top: 0.1rem;
          }
      }
      .list-r{
          margin-top: 0.05rem;
          margin-left: 0.2rem;
      
          strong{font-size: 0.18rem;}
          img{
              margin-left: 0.1rem;
              height: 0.14rem;
          }
          p{
              color: #aaaaaa;
              font-size: 0.14rem;
          }
        
      }
  }
  .bottom-h{
      line-height: 0.6rem;
      color: #aaaaaa;
      small{
          margin-left: 0.2rem;
          img{
              height: 0.12rem;

          }
      }
    
  }
}
  .circle {
          position: absolute;
          top: 0rem;
          left: 0.35rem;
          width: 0.1rem;
          height: 0.1rem;
          border-radius: 50%;
          background-color: #ee0a24;
        }
</style>